<template>
  <div>
    <Table border :columns="getColumns" :data="dataList">
      <template slot-scope="{ row, index }" slot="selection">
        <Checkbox v-model="dataList[index].check" :disabled="isStep6">
          <span></span>
        </Checkbox>
      </template>
      <template slot-scope="{ row, index }" slot="index">
        <span>{{index + 1}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="tableName">
        <span v-if="ifedit || row.serviceId > 0">{{row.tableName}}</span>
        <Input v-else v-model="dataList[index].tableName" type="text" :readonly="ifedit" />
      </template>
      <template slot-scope="{ row, index }" slot="domain">
        <span v-if="ifedit || (row.serviceId > 0)">{{row.domain}}</span>
        <Select v-else v-model="dataList[index].domain" :transfer="true" @on-change="changeDomain($event,index)">
          <Option value="O域">O域</Option>
          <Option value="B域">B域</Option>
          <Option value="M域">M域</Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="subjectField">
        <span v-if="ifedit || (row.serviceId > 0)">{{row.subjectField}}</span>
        <Select v-else v-model="dataList[index].subjectField" :transfer="true">
          <Option v-for="item in row.subjectFieldList" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="purpose">
        <span v-if="ifedit">{{row.purpose}}</span>
        <Input v-else v-model="dataList[index].purpose" type="textarea" :rows="1" maxlength="500" show-word-limit
          :readonly="ifedit" style="height: 90%" />
      </template>
      <template slot-scope="{ row, index }" slot="cycleType">
        <span v-if="ifedit || (row.serviceId > 0)">{{row.cycleType}}</span>
        <Select v-else v-model="dataList[index].cycleType" :transfer="true">
          <Option value="日表">日表</Option>
          <Option value="月表">月表</Option>
          <Option value="小时表">小时表</Option>
          <Option value="实时表">实时表</Option>
        </Select>
      </template>

      <template slot-scope="{ row, index }" slot="fields">
        <span>{{row.fields.length}}个</span>
      </template>

      <template slot-scope="{ row, index }" slot="len">
        <span>{{row.fields.length}} / {{row.len}}</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <div style="display: inline-block;">
          <a v-show="row.serviceId > 0" href="javascript:void(0)" @click="detailData(index)">
            <div class="text_link" style="width: 80px;">
              关联目录
            </div>
          </a>
          <a href="javascript:void(0)" @click="lookDataInfo(row, index)">
            <div class="text_link" style="width: 80px;">
              字段详情
            </div>
          </a>
          <a v-show="!ifedit" href="javascript:void(0)" @click="daleteDataList(index)">
            <div class="text_link" style="width: 50px;">
              删除
            </div>
          </a>
        </div>
      </template>
    </Table>

    <div v-if="detailModel">
      <Modal v-model="detailModel" title="数据表详情" width="80%">
        <div class="qheader" :style="{borderBottom: '1px solid rgb(210,210,210)'}">
          <span>数据表信息</span>
        </div>
        <div style="padding-top: 10px">
          <table border="1px" class="tale">
            <tr align="center" style="height: 3vw">
              <th style="width:10vw">表英文名</th>
              <td style="width:20vw">{{showData.tableNameEn}}</td>
              <th style="width:10vw">表中文名</th>
              <td style="width:20vw">{{showData.tableName}}</td>
              <th style="width:10vw">层级</th>
              <td style="width:20vw">{{showData.dataLevel}}</td>
            </tr>
            <tr align="center" style="height: 3vw">
              <th>所属域</th>
              <td>{{showData.domain}}</td>
              <th>主题域</th>
              <td>{{showData.subjectField}}</td>
              <th>数据开放推荐级别</th>
              <td>{{showData.dataOpenLevel}}</td>
            </tr>
            <tr align="center" style="height: 3vw">
              <th>更新周期</th>
              <td>{{showData.cycleType}}</td>
              <th>保存时长</th>
              <td>{{showData.keepTime}}</td>
              <th>保存时长单位</th>
              <td>{{showData.keepUnit}}</td>
            </tr>
            <tr align="center" style="height: 3vw">
              <th>数据范围</th>
              <td>{{showData.dataScope}}</td>
              <th>所属系统</th>
              <td>{{showData.oriSys}}</td>
              <th>更新时间</th>
              <td>{{showUpdateTime(showData.updateTime)}}</td>
            </tr>
            <tr align="center" style="height: 3vw">
              <th>业务口径</th>
              <td colspan="5" align="left">{{showData.caliber}}</td>
            </tr>
          </table>
        </div>
        <div class="qheader" :style="{borderBottom: '1px solid rgb(210,210,210)'}">
          <span>字段信息</span>
        </div>
        <div style="padding-top: 10px">
          <Table border :columns="columns" :data="showColumnsList">
          </Table>
          <br />
          <Page :total="showColumns.length" :current="showColumnsCurrent" :page-size="10"
            style="font-size: 13px; text-align: right; padding-right: 20px;" @on-change="getShowColumnsPage"
            prev-text="上一页" next-text="下一页" />
        </div>
        <div slot="footer">
          <Button type="primary" size="large" @click="detail_ok">确定</Button>
        </div>
      </Modal>
    </div>

    <div v-if="showDataInfo">
      <Modal v-model="showDataInfo" :title="showDataInfoName + ' / 字段详情'" width="98%" :mask-closable="false">
        <Table border :columns="dataInfo.columns" :data="showDataInfoList">
          <template slot-scope="{ row, index }" slot="index">
            <span>{{index + (current-1)*10 + 1}}</span>
          </template>
          <template slot-scope="{ row, index }" slot="fieldName">
            <span v-if="ifedit || (dataList[dataIndex].serviceId > 0)">{{row.fieldName}}</span>
            <Input v-else style="width:80%;" v-model="dataList[dataIndex].fields[index  + (current-1)*10].fieldName"
              type="text" :readonly="ifedit" />
          </template>
          <template slot-scope="{ row, index }" slot="fieldType">
            <span v-if="ifedit || (dataList[dataIndex].serviceId > 0)">{{row.fieldType}}</span>
            <Input v-else style="width:80%;" v-model="dataList[dataIndex].fields[index  + (current-1)*10].fieldType"
              type="text" :readonly="ifedit" />
            </td>
          </template>
          <template slot-scope="{ row, index }" slot="isEncryption">
            <span v-if="ifedit">{{row.isEncryption == 1? "是":"否"}}</span>
            <Select v-else style="width:80%;" v-model="dataList[dataIndex].fields[index  + (current-1)*10].isEncryption"
              :disabled="ifedit" :transfer="true">
              <Option :value="1">是</Option>
              <Option :value="0">否</Option>
            </Select>
          </template>
          <template slot-scope="{ row, index }" slot="isRequired">
            <span v-if="ifedit">{{row.isRequired == 1? "是":"否"}}</span>
            <Select v-else style="width:80%;" v-model="dataList[dataIndex].fields[index + (current-1)*10].isRequired"
              :disabled="ifedit" :transfer="true">
              <Option :value="1">是</Option>
              <Option :value="0">否</Option>
            </Select>
          </template>
          <template slot-scope="{ row, index }" slot="remark">
            <span v-if="ifedit">{{row.remark}}</span>
            <Input v-else v-model="dataList[dataIndex].fields[index + (current-1)*10].remark" maxlength="255"
              show-word-limit type="textarea" :autosize="{minRows: 1,maxRows: 6}" :readonly="ifedit" />
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button :disabled="ifedit || dataList[dataIndex].fields.length == 1" size="small"
              @click="daleteFields(dataIndex,index + (current-1)*10)">删除</button>
            <Button :disabled="ifedit || dataList[dataIndex].serviceId > 0" size="small"
              @click="addFields(dataIndex)">新增</button>
          </template>
        </Table>
        <br />
        <Page :total="dataList[dataIndex].fields.length" :current="current" :page-size="10"
          style="font-size: 13px; text-align: right; padding-right: 20px;" @on-change="getPageList" prev-text="上一页"
          next-text="下一页" />
        <div slot="footer">
          <Button type="primary" @click="showDataInfo=false">确定</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
  export default {
    name: "apply",
    components: {},
    props: {
      ifedit: {},
      value: {},
      ifShrink: {
        default: false
      },
      detail: {},
      isPartShrink: {},
      isStep6: {
        type: Boolean,
        default: false
      },
      subjectFieldList: [],
      isPrint:{
        default: false
      }
    },
    computed: {
      dataList: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      },
      getColumns() {
        if(this.isPrint){
            this.dataColumn.push({
              title: '字段数',
              key: 'fields',
              maxWidth: 120,
              align: 'center',
              slot: "fields"
            });

            this.dataColumn.push({
              title: '字段数占比',
              key: 'len',
              maxWidth: 120,
              align: 'center',
              slot: "len"
            });
        } else {
          if (this.ifShrink && !this.detail && this.isPartShrink == 1) {
            this.dataColumn.unshift({
              title: ' ',
              slot: "selection",
              width: 60,
              align: 'center',
              //fixed: 'left'
            }, )
          }

          if (!this.ifShrink) {
            this.dataColumn.push({
              title: '字段数',
              key: 'fields',
              maxWidth: 120,
              align: 'center',
              slot: "fields"
            });

            this.dataColumn.push({
              title: '字段数占比',
              key: 'len',
              maxWidth: 120,
              align: 'center',
              slot: "len"
            });

            this.dataColumn.push({
              title: '操作',
              key: 'action',
              maxWidth: 260,
              align: 'center',
              slot: "action"
            });

          }
        }
        return this.dataColumn;
      }
    },
    data() {
      return {
        dataInfo: {
          click: true,
          clickindex: [],
          columnsTitle: [
            "序号",
            "*字段名",
            "*字段类型",
            "*是否加密",
            "*是否必选",
            "字段必要性说明"
          ],
          columns: [{
              title: '序号',
              key: 'index',
              width: 60,
              slot: "index"
            },
            {
              title: '*字段名',
              key: 'fieldName',
              maxWidth: 160,
              slot: "fieldName"
            },
            {
              title: '*字段类型',
              key: 'fieldType',
              maxWidth: 160,
              slot: "fieldType"
            },
            {
              title: '*是否加密',
              key: 'isEncryption',
              maxWidth: 160,
              slot: "isEncryption"
            },
            {
              title: '*是否必选',
              key: 'isRequired',
              maxWidth: 160,
              slot: "isRequired"
            },
            {
              title: '字段必要性说明/加密要求',
              key: 'remark',
              slot: "remark"
            },
            {
              title: ' ',
              slot: 'action',
              align: 'center',
              width: 150,
            },
          ]
        },
        dataColumn: [{
            title: '序号',
            key: 'index',
            width: 80,
            align: 'center',
            slot: "index"
          },
          {
            title: '*表名',
            key: 'tableName',
            align: 'center',
            slot: "tableName"
          },
          {
            title: '*所属域',
            key: 'domain',
            align: 'center',
            slot: "domain",
            width: "100"
          },
          // {
          // 	title: '*主题域',
          // 	key: 'subjectField',
          // 	align: 'center',
          // 	slot: "subjectField",
          // 	width:"150"
          // },
          {
            title: '*用途',
            key: 'purpose',
            align: 'center',
            slot: "purpose"
          },
          {
            title: '*更新周期',
            key: 'cycleType',
            width: 120,
            align: 'center',
            slot: "cycleType"
          },
          // {
          // 	title: '字段数',
          // 	key: 'fields',
          // 	maxWidth: 120,
          // 	align: 'center',
          // 	slot: "fields"
          // },
          // {
          // 	title: '操作',
          // 	key: 'action',
          // 	maxWidth: 260,
          // 	align: 'center',
          // 	slot: "action"
          // }
        ],
        columns: [{
            title: '字段属性',
            key: 'fieldNameEn',
            width: 200,
            resizable: true,
          },
          {
            title: '字段名称',
            key: 'fieldName',
            width: 200,
            resizable: true,
          },
          {
            title: '数据类型',
            key: 'fieldType',
            width: 150,
            resizable: true,
          },
          {
            title: '数据样例',
            key: 'fieldEnum',
            width: 200,
            resizable: true,
          },
          {
            title: '字段描述',
            key: 'fieldDes',
            width: 350,
            resizable: true,
          },
          {
            title: 'IT部门共享',
            key: 'departmentShare',
            width: 200,
            resizable: true,
          },
          {
            title: '移动单位间共享',
            key: 'companyShare',
            width: 200,
            resizable: true,
          },
          {
            title: '第三方合作共享',
            key: 'otherShare',
            width: 200,
            resizable: true,
          },
          {
            title: '计算口径',
            key: 'countCaliber',
            width: 150,
            resizable: true,
          },
          {
            title: '备注',
            key: 'des',
            width: 150,
          }
        ],
        showDataInfo: false,
        dataIndex: 0,
        showDataInfoList: [],
        showDataInfoName: "数据表",
        current: 1,
        showColumnsCurrent: 1, // 查看关联目录页码
        showColumnsList: [], //当前查看的目录集合
        detailModel: false,
      }
    },
    created: function() {
      console.log("--aaaaaaaaaaaaaaaaaaaaaaa->", this.dataList)
    },
    methods: {
      changeDomain(data, index) {
        console.log("----changeDomain-------", data, index);
        this.dataList[index].subjectField = "";
        if (data === "O域") {
          var subjectFieldList = [{
              value: "DPI数据",
              label: "DPI数据"
            },
            {
              value: "位置信令数据",
              label: "位置信令数据"
            },
            {
              value: "其他",
              label: "其他"
            }
          ]

          this.dataList[index].subjectFieldList = subjectFieldList;
        } else {
          var subjectFieldList = [{
              value: "事件域",
              label: "事件域"
            },
            {
              value: "服务域",
              label: "服务域"
            },
            {
              value: "渠道域",
              label: "渠道域"
            },
            {
              value: "用户域",
              label: "用户域"
            },
            {
              value: "码表",
              label: "码表"
            },
            {
              value: "财务域",
              label: "财务域"
            },
            {
              value: "资源域",
              label: "资源域"
            },
            {
              value: "其他",
              label: "其他"
            }
          ]

          this.dataList[index].subjectFieldList = subjectFieldList;
        }
      },
      lookDataInfo(row, index) {
        this.current = 1
        this.showDataInfoName = row.tableName
        this.showDataInfo = true
        this.dataIndex = index
        let len = this.dataList[index].fields.length
        console.log('len', len)
        this.showDataInfoList = this.dataList[index].fields.slice(0, len > 10 ? 10 : len)
      },
      getPageList(page) {
        this.showDataInfoList = []
        this.current = page
        this.$forceUpdate()
        this.showDataInfoList = this.dataList[this.dataIndex].fields.slice((page - 1) * 10, page * 10)
      },
      detailData(index) {
        this.showColumnsCurrent = 1
        console.log("======detailData=====", this.dataList[index]);
        this.showData = this.dataList[index].service;
        this.showColumns = this.dataList[index].fields;
        this.detailModel = true;
        let len = this.showColumns.length
        this.showColumnsList = this.showColumns.slice(0, len > 10 ? 10 : len)
      },
      daleteDataList(index) {
        this.dataList.splice(index, 1);
      },
      detail_ok() {
        this.detailModel = false;
      },
      // 切换关联目录页
      getShowColumnsPage(page) {
        this.showColumnsCurrent = page
        this.showColumnsList = this.showColumns.slice((page - 1) * 10, page * 10)
      },
      addFields(index) {
        this.dataList[this.dataIndex].fields.unshift({
          fieldName: "",
          fieldType: "",
          isEncryption: 1,
          isRequired: 1,
          remark: "",
          id: 0,
          fieldServiceId: 0
        })
        console.log("---->", this.dataList[this.dataIndex],this.current)
        let len = this.dataList[this.dataIndex].fields.length
        this.dataList[this.dataIndex].len = len
        console.log("---->", )
        var i = (this.current - 1)*10;
        this.showDataInfoList = this.dataList[this.dataIndex].fields.slice(i, 10+i)
      },
      daleteFields(index, id) {
        this.dataList[index].fields.splice(id, 1);
        let len = this.dataList[index].fields.length;
        this.dataList[index].len = len;

        if(this.showDataInfoList.length <= 1 && this.current != 1){
          this.current = this.current -1;
        }
        console.log("-2222--->",this.showDataInfoList.length)
        var i = (this.current - 1)*10;
        this.showDataInfoList = this.dataList[index].fields.slice(i, 10+i)
      },
      showUpdateTime(date) {
        return this.utils.formatDate(new Date(date * 1000), "yyyy-MM-dd");
      },
    }
  }
</script>

<style lang="scss" scoped="">
  .ivu-checkbox-wrapper {
    font-size: 0px;
  }
</style>
